<template>
	<view class="content">
		<view class="box">
			<view class="list">
				<text class="name">合同名称</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips"
					v-model="info.contract_name" />
			</view>
			<view class="list">
				<text class="name">合同开始时间</text>
				<uni-datetime-picker type="date" v-model="info.contract_validity_start" class="val">
					<text v-if="!info.contract_validity_start" class="tips">请选择</text>
					<text v-else class="form-input">{{info.contract_validity_start}}</text>
				</uni-datetime-picker>
			</view>
			<view class="list">
				<text class="name">合同结束时间</text>
				<uni-datetime-picker type="date" v-model="info.contract_validity_end" class="val"
					:start="info.contract_validity_start">
					<text v-if="!info.contract_validity_end" class="tips">请选择</text>
					<text v-else class="form-input">{{info.contract_validity_end}}</text>
				</uni-datetime-picker>
			</view>
			<view class="list">
				<text class="name">发起签署时间</text>
				<uni-datetime-picker type="date" v-model="info.initiateStartDate" class="val"
					:start="info.contract_validity_start">
					<text v-if="!info.initiateStartDate" class="tips">请选择</text>
					<text v-else class="form-input">{{info.initiateStartDate}}</text>
				</uni-datetime-picker>
			</view>
			<view class="list">
				<text class="name">合同金额(元)</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="info.amount" />
			</view>
			<view class="list">
				<text class="name">合同备注</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="info.remark" />
			</view>
			<view class="title">
				<text>请选择并上传合同</text>
			</view>
			<view class="file" v-if="info.file_url">
				<view class="filename" >
					{{info.file_url}}
				</view>
				<view class="del" @tap="preview(info.file_url)">查看</view>
				<view class="del" @tap="del()">删除</view>
			</view>
			<view class="upload" v-if="!info.file_url">
				<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile()"></uni-icons>
			</view>
		</view>

		<view class="btnbox">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script setup>
	import uploadUrl from '../../network/utils.js';
	import {
		uploadContract
	} from '../../network/order.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	onLoad((res) => {
		info.purchase_order_id = res.id
		info.type = res.type
	})
	const info = reactive({
		contract_name: '',
		purchase_order_id: '',
		contract_validity_start: '',
		contract_validity_end: '',
		initiateStartDate: '',
		amount: '',
		file_url: '',
		remark: '',
	})
	const choosefile = () => {
		// #ifdef  APP-PLUS
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes:['pdf'],
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.uploadUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					if(data.code==0){
						uni.showToast({
							title: data.msg,
							icon:'none'
						})
						return
					}
					if(data.data.url.split('.')[1]!='pdf'){
						uni.showToast({
							title: '上传文件格式不规范',
							icon:'none'
						})
						return
					}
					info.file_url = data.data.fullurl
				}
			})
		})
		// #endif

		// #ifndef  APP-PLUS	
		H5upload()
		//#endif
	}
	const H5upload = () => {
		uni.chooseFile({
			count: 1,
			extension:['.pdf'],
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						info.file_url = data.data.fullurl
					}
				})
			}
		})
	}
	const preview = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const del = ()=>{
		info.file_url =''
	}
	const submit = () => {
		uploadContract(info).then(res => {
			uni.showToast({
				title: '上传成功'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 300)
		})
	}
</script>

<style lang="scss">
	.content {
		margin-top: 2rpx;
		background-color: #f7f7f7;
		width: 100%;
		padding-bottom: 160rpx;
	}

	.box {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 20rpx 0;
	}

	.list {
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		background-color: #fff;
		font-size: 28rpx;
		justify-content: space-between;

		.name {
			width: 200rpx;
		}

		.tips {
			color: #999;
			width: 500rpx;
			text-align: right;
			font-size: 24rpx;
		}

		.val {
			color: #333;
			width: 500rpx;
			text-align: right;
		}
	}


	.title {
		margin: 30rpx 0;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		gap: 10rpx;

		.icon {
			font-size: 40rpx;
			color: #ff6700;
		}
	}

	.upload {
		width: 220rpx;
		height: 220rpx;
		border: 2rpx solid #f7f7f7;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.file {
		width: 100%;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-top: 30rpx;

		.filename {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #ffc400;
		}

		.del {
			color: #ff6700;
		}
	}

	.btn {
		width: 400rpx;
		background-color: #ffc400;
		line-height: 60rpx;
		text-align: center;
		margin: 40rpx auto;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.btnbox {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		padding: 10rpx 0;
		background-color: #fff;
		border-top: 2rpx solid #f7f7f7;
	}
</style>